<template>
  <div class="followbutton">
    <button
      class="followbutton_item"
      :class="!item.isFollow ? 'on' : ''"
      v-if="type === 1"
    >
      <i class="icon-add" v-if="!item.isFollow"></i
      >{{ !item.isFollow ? $t('lang["关注"]') : $t('lang["已关注"]') }}
    </button>
    <button
      class="followbutton_item"
      :class="!item.isFollow ? 'on' : ''"
      v-if="type === 2"
    >
      {{ !item.isFollow ? $t('lang["关注"]') : $t('lang["不再关注"]') }}
    </button>
  </div>
</template>
<script>
export default {
  name: "FollowButton",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
    type: {
      type: Number,
      default() {
        return 1;
      },
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.followbutton {
  .followbutton_item {
    border: 0;
    line-height: 32 / @base;
    border-radius: 5 / @base;
    background-color: rgb(239, 239, 239);
    color: #666;
    display: block;
    width: 100%;
    &.on {
      background-color: rgb(30, 144, 255);
      color: #fff;
    }
  }
}
</style>
